<template>
  <div id="channelEdit">
    <div class="myChannel channel">
      <van-cell :border="false" center title="我的频道">
        <template>
          <van-button
            @click="isEdit = !isEdit"
            color="red"
            size="mini"
            plain
            round
            >{{ isEdit ? "完成" : "编辑" }}</van-button
          >
        </template>
      </van-cell>

      <van-grid :gutter="10">
        <van-grid-item
          :class="{ active: index === activeIndex }"
          v-for="(item, index) in myChannels"
          :key="item.id"
          :icon="isEdit && index !== 0 ? 'close' : ''"
          :text="item.name"
          @click="onClickMy(index, item.id)"
        />
      </van-grid>
    </div>

    <!-- 推荐频道 -->
    <div class="recommendChannel channel">
      <van-cell :border="false" center title="频道推荐"></van-cell>

      <van-grid direction="horizontal" icon-size="0.32rem" :gutter="10">
        <van-grid-item
          @click="addToMyChannel(item)"
          v-for="item in recommendChannel"
          icon="plus"
          :key="item.id"
          :text="item.name"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannel, addChannel, deleteChannel } from '@/api/channel.js'
import { Toast } from 'vant'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'

export default {
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannel: [],
      isEdit: false
    }
  },
  created () {
    this.loadAllChannel()
  },
  computed: {
    ...mapState(['user']),
    recommendChannel () {
      // 对allChannel 进行筛选
      return this.allChannel.filter(
        channelItem => !this.myChannels.some(item => item.id === channelItem.id)
      )
      // allChannel每一项数据 判断是否在myChannels里
      // 如果在 就属于myChannels里面 不属于推荐
      // 不在则属于推荐
    }
  },
  // 定义方法
  methods: {
    async loadAllChannel () {
      try {
        const { data: res } = await getAllChannel()
        // console.log(res.data.channels)
        this.allChannel = res.data.channels
      } catch (err) {
        Toast('异常')
      }
    },
    async addToMyChannel (item) {
      this.myChannels.push(item)
      if (this.user) {
        try {
          await addChannel({
            id: item.id,
            seq: this.myChannels.length
          })
          Toast('成功')
        } catch (err) {
          Toast('失败')
        }
      } else {
        setItem('HMTT-CHANNELS', this.myChannels)
      }
    },
    async onClickMy (index, id) {
      if (this.isEdit) {
        // 推荐不能删
        if (index === 0) return
        // 删除当前高亮之前的频道 让高亮继续在当前
        if (index <= this.activeIndex) {
          this.$emit('updata_active', this.activeIndex - 1, true)
        }
        this.myChannels.splice(index, 1)
        try {
          await this.deteleStorage(id)
          Toast.success('删除成功！')
        } catch (err) {
          Toast.fail('删除失败！')
        }
      } else {
        // console.log('跳转')
        this.$emit('updata_active', index, false)
      }
    },
    // 删除持久化
    deteleStorage (id) {
      // 判断是否登录
      if (this.user) {
        // 已登录
        deleteChannel(id)
      } else {
        // 未登录
        setItem('HMTT-CHANNELS', this.myChannels)
      }
    }
  }
}
</script>

<style scoped lang="less">
#channelEdit {
  padding: 90px 0 0 0;
  /deep/ .active {
    .van-grid-item__text {
      color: red !important;
    }
  }
  .channel {
    /deep/ .van-grid {
      .van-grid-item__content {
        width: 160px;
        height: 86px;
        background-color: #f4f5f6;
        border-radius: 6px;
      }
      .van-grid-item__text {
        font-size: 28px;
        color: #222;
      }
      .van-grid-item__content--surround::after {
        border: 0;
      }
    }
  }
  .myChannel {
    .van-button {
      padding: 0 20px;
    }
    /deep/ .van-grid-item__text {
      margin-top: 0;
    }
    /deep/ .van-icon-close {
      position: absolute;
      top: -10px;
      right: -10px;
      font-size: 32px;
    }
  }
}
</style>
